<template>
	<div>
		<mj-title type="h2" title="Menu 导航菜单"></mj-title>
		<div class="page-desc">为网站提供导航功能的菜单。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<div class="page-desc" style="margin-bottom:10px;">
			<p>水平的顶部导航菜单。</p>
			<p>通过设置属性 theme 为 light、dark 可以选择主题。</p>
			<p>通过事件 <code>select</code> 可以得到点击菜单的 name | to | target 值，从而控制页面路由或自定义操作。</p>
			<p>水平导航菜单，只有二级菜单。侧栏可以拥有三级菜单</p>
		</div>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-menu :theme="themevalue" @select="onMenuSelect">
					<mj-menu-item name="1" to="http://www.baidu.com" target="_blank"><Icon type="home"/> 首页</mj-menu-item>
					<mj-menu-item name="2"><Icon type="email"/> 消息</mj-menu-item>
					<mj-submenu name="3">
						<template slot="title"><Icon type="note"/> 我的文件</template>
						<mj-menu-group title="添加到文件">
							<mj-menu-item name="3-1">上传文件</mj-menu-item>
							<mj-menu-item name="3-2">上传文件夹</mj-menu-item>
							<mj-menu-item name="3-3">新建文件夹</mj-menu-item>
						</mj-menu-group>
						<mj-menu-group title="添加到相簿">
							<mj-menu-item name="3-4">上传照片/视频</mj-menu-item>
							<mj-menu-item name="3-5">上传照片文件夹</mj-menu-item>
						</mj-menu-group>
					</mj-submenu>
					<mj-menu-item name="4"><Icon type="delete"/> 回收站</mj-menu-item>
					<mj-submenu name="5">
						<template slot="title"><Icon type="setting"/> 设置</template>
						<mj-menu-group title="个人中心">
							<mj-menu-item name="5-1">修改密码</mj-menu-item>
							<mj-menu-item name="5-2">修改信息</mj-menu-item>
						</mj-menu-group>
						<mj-menu-group title="权限设置">
							<mj-menu-item name="5-4">用户权限</mj-menu-item>
						</mj-menu-group>
					</mj-submenu>
				</mj-menu>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-menu active="1" :theme="themevalue" @select="onMenuSelect" class="mb40">
							&lt;mj-menu-item name="1">&lt;Icon type="home"/> 首页&lt;/mj-menu-item>
							&lt;mj-menu-item name="2">收藏夹&lt;/mj-menu-item>
							&lt;mj-submenu name="3">
								&lt;template slot="title">我的文件&lt;/template>
								&lt;mj-menu-group title="添加到文件">
									&lt;mj-menu-item name="3-1">上传文件&lt;/mj-menu-item>
									&lt;mj-menu-item name="3-2">上传文件夹&lt;/mj-menu-item>
									&lt;mj-menu-item name="3-3">新建文件夹&lt;/mj-menu-item>
								&lt;/mj-menu-group>
								&lt;mj-menu-group title="添加到相簿">
									&lt;mj-menu-item name="3-4">上传照片/视频&lt;/mj-menu-item>
									&lt;mj-menu-item name="3-5">上传照片文件夹&lt;/mj-menu-item>
								&lt;/mj-menu-group>
							&lt;/mj-submenu>
							&lt;mj-menu-item name="4">回收站&lt;/mj-menu-item>
							&lt;mj-submenu name="5">
								&lt;template slot="title">设置&lt;/template>
								&lt;mj-menu-group title="个人中心">
									&lt;mj-menu-item name="5-1">修改密码&lt;/mj-menu-item>
									&lt;mj-menu-item name="5-2">修改信息&lt;/mj-menu-item>
								&lt;/mj-menu-group>
								&lt;mj-menu-group title="权限设置">
									&lt;mj-menu-item name="5-4">用户权限&lt;/mj-menu-item>
								&lt;/mj-menu-group>
							&lt;/mj-submenu>
						&lt;/mj-menu>
					&lt;/template>
					&lt;script>
					export default {
						methods:{
							onMenuSelect(name,to,target){
								console.log('父组件菜单选中:',name,to,target)
							},
						}
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="侧栏"></mj-title>
		<div class="page-desc" style="margin-bottom:10px;">
			<p>设置 <code>mode="vertical"</code> 成为侧栏导航</p>
		</div>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<div style="width:200px;">
					<mj-menu :active="demoactive" mode="vertical" @select="onMenuSelect" :theme="themevalue">
						<mj-menu-item name="1">Home</mj-menu-item>
						<mj-menu-item name="2">Introduction</mj-menu-item>
						<mj-submenu name="3">
							<template slot="title">Directives</template>
							<mj-menu-group>
								<mj-menu-item name="3-1">HeightMatch</mj-menu-item>
								<mj-menu-item name="3-2">HeightViewport</mj-menu-item>
								<mj-menu-item name="3-3">Margin</mj-menu-item>
							</mj-menu-group>
							<mj-menu-group>
								<mj-menu-item name="3-4">Scroll</mj-menu-item>
								<mj-menu-item name="3-5">Tooltip</mj-menu-item>
							</mj-menu-group>
						</mj-submenu>
						<mj-submenu name="5">
							<template slot="title">Setting</template>
							<mj-menu-group>
								<mj-menu-item name="5-1">password</mj-menu-item>
								<mj-menu-item name="5-2">user info</mj-menu-item>
								<mj-submenu name="5-3">
									<template slot="title">components</template>
									<mj-menu-group>
										<mj-menu-item name="5-3-1">Breadcrumb</mj-menu-item>
										<mj-menu-item name="5-3-2">Button</mj-menu-item>
									</mj-menu-group>
								</mj-submenu>
							</mj-menu-group>
						</mj-submenu>
					</mj-menu>
				</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-menu active="3-1" mode="vertical" @select="onMenuSelect">
							&lt;mj-menu-item name="1">Home&lt;/mj-menu-item>
							&lt;mj-menu-item name="2">Introduction&lt;/mj-menu-item>
							&lt;mj-submenu name="3">
								&lt;template slot="title">Directives&lt;/template>
								&lt;mj-menu-group>
									&lt;mj-menu-item name="3-1">HeightMatch&lt;/mj-menu-item>
									&lt;mj-menu-item name="3-2">HeightViewport&lt;/mj-menu-item>
									&lt;mj-menu-item name="3-3">Margin&lt;/mj-menu-item>
								&lt;/mj-menu-group>
								&lt;mj-menu-group>
									&lt;mj-menu-item name="3-4">Scroll&lt;/mj-menu-item>
									&lt;mj-menu-item name="3-5">Tooltip&lt;/mj-menu-item>
								&lt;/mj-menu-group>
							&lt;/mj-submenu>
							&lt;mj-submenu name="5">
								&lt;template slot="title">Setting&lt;/template>
								&lt;mj-menu-group>
									&lt;mj-menu-item name="5-1">password&lt;/mj-menu-item>
									&lt;mj-menu-item name="5-2">user info&lt;/mj-menu-item>
									&lt;mj-submenu name="5-3">
										&lt;template slot="title">components&lt;/template>
										&lt;mj-menu-group>
											&lt;mj-menu-item name="5-3-1">Breadcrumb&lt;/mj-menu-item>
											&lt;mj-menu-item name="5-3-2">Button&lt;/mj-menu-item>
										&lt;/mj-menu-group>
									&lt;/mj-submenu>
								&lt;/mj-menu-group>
							&lt;/mj-submenu>
						&lt;/mj-menu>
					&lt;/template>
					&lt;script>
					export default {
						data(){
							return {
								themevalue:'light',
							}
						},
						methods:{
							onMenuSelect(name,to,target){
								console.log('父组件菜单选中:',name,to,target)
							},
						}
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="手风琴效果"></mj-title>
		<div class="page-desc" style="margin-bottom:10px;">
			<p>设置属性 <code>accordion</code> 可以开启手风琴模式，每次只能展开一个子菜单。点击菜单后，其他展开项会收起。</p>
		</div>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<div style="width:200px;">
					<mj-menu active="1-1" mode="vertical" :theme="themevalue" accordion >
						<mj-submenu name="1">
							<template slot="title">Directives</template>
							<mj-menu-group>
								<mj-menu-item name="1-1">HeightMatch</mj-menu-item>
								<mj-menu-item name="1-2">HeightViewport</mj-menu-item>
							</mj-menu-group>
						</mj-submenu>
						<mj-submenu name="2">
							<template slot="title">Directives</template>
							<mj-menu-group>
								<mj-menu-item name="2-1">HeightMatch</mj-menu-item>
								<mj-menu-item name="2-2">HeightViewport</mj-menu-item>
							</mj-menu-group>
						</mj-submenu>
						<mj-submenu name="3">
							<template slot="title">Directives</template>
							<mj-menu-group>
								<mj-menu-item name="3-1">HeightMatch</mj-menu-item>
								<mj-menu-item name="3-2">HeightViewport</mj-menu-item>
							</mj-menu-group>
						</mj-submenu>
					</mj-menu>
				</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-menu active="1-1" mode="vertical" :theme="themevalue" accordion >
							&lt;mj-submenu name="1">
								&lt;template slot="title">Directives&lt;/template>
								&lt;mj-menu-group>
									&lt;mj-menu-item name="1-1">HeightMatch&lt;/mj-menu-item>
									&lt;mj-menu-item name="1-2">HeightViewport&lt;/mj-menu-item>
								&lt;/mj-menu-group>
							&lt;/mj-submenu>
							&lt;mj-submenu name="2">
								&lt;template slot="title">Directives&lt;/template>
								&lt;mj-menu-group>
									&lt;mj-menu-item name="2-1">HeightMatch&lt;/mj-menu-item>
									&lt;mj-menu-item name="2-2">HeightViewport&lt;/mj-menu-item>
								&lt;/mj-menu-group>
							&lt;/mj-submenu>
							&lt;mj-submenu name="3">
								&lt;template slot="title">Directives&lt;/template>
								&lt;mj-menu-group>
									&lt;mj-menu-item name="3-1">HeightMatch&lt;/mj-menu-item>
									&lt;mj-menu-item name="3-2">HeightViewport&lt;/mj-menu-item>
								&lt;/mj-menu-group>
							&lt;/mj-submenu>
						&lt;/mj-menu>
					&lt;/template>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h6" title="切换主题"></mj-title>
		<div class="mb50">
			<mj-radio-group :data="theme" v-model="themevalue" type="button"></mj-radio-group>
		</div>

		<mj-title type="h5" title="折叠"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-radio-group :data="toggle.data" v-model="toggle.value" type="button"></mj-radio-group>
				<div style="width:200px;margin-top:10px;">
					<div class="toggle-sidebar" :class="{'min':toggle.value==0}">
						<mj-menu :active="demoactive" mode="vertical" @select="onMenuSelect" :theme="themevalue">
							<mj-menu-item name="1">
								<Icon type="home" class="title-icon" />
								<span v-if="toggle.value==1">Home</span>
								<mj-tooltip v-else direction="right" content="Home"><span class="item-tips"></span></mj-tooltip>
							</mj-menu-item>
							<mj-menu-item name="2">
								<Icon type="app" class="title-icon" />
								<span v-if="toggle.value==1">Introduction</span>
								<mj-tooltip v-else direction="right" content="Introduction"><span class="item-tips"></span></mj-tooltip>
							</mj-menu-item>
							<mj-submenu name="3">
								<template slot="title">
									<Icon type="integral" class="title-icon" />
									<span v-if="toggle.value==1">Directives</span>
								</template>
								<mj-menu-group v-show="toggle.value==1">
									<mj-menu-item name="3-1">HeightMatch</mj-menu-item>
									<mj-menu-item name="3-2">HeightViewport</mj-menu-item>
									<mj-menu-item name="3-3">Margin</mj-menu-item>
								</mj-menu-group>
								<mj-menu-group v-show="toggle.value==1">
									<mj-menu-item name="3-4">Scroll</mj-menu-item>
									<mj-menu-item name="3-5">Tooltip</mj-menu-item>
								</mj-menu-group>
							</mj-submenu>
							<mj-submenu name="5">
								<template slot="title">
									<Icon type="setting" class="title-icon" />
									<span v-if="toggle.value==1">Setting</span>
								</template>
								<mj-menu-group v-show="toggle.value==1">
									<mj-menu-item name="5-1">password</mj-menu-item>
									<mj-menu-item name="5-2">user info</mj-menu-item>
									<mj-submenu name="5-3">
										<template slot="title">components</template>
										<mj-menu-group>
											<mj-menu-item name="5-3-1">Breadcrumb</mj-menu-item>
											<mj-menu-item name="5-3-2">Button</mj-menu-item>
										</mj-menu-group>
									</mj-submenu>
								</mj-menu-group>
							</mj-submenu>
						</mj-menu>
					</div>
				</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-radio-group :data="toggle.data" v-model="toggle.value" type="button">&lt;/mj-radio-group>
						&lt;div style="width:200px;margin-top:10px;">
							&lt;div class="toggle-sidebar" :class="{'min':toggle.value==0}">
								&lt;mj-menu :active="demoactive" mode="vertical" @select="onMenuSelect" :theme="themevalue">
									&lt;mj-menu-item name="1">
										&lt;Icon type="home" class="title-icon" />
										&lt;span v-if="toggle.value==1">Home&lt;/span>
										&lt;mj-tooltip v-else direction="right" content="Home">&lt;span class="item-tips">&lt;/span>&lt;/mj-tooltip>
									&lt;/mj-menu-item>
									&lt;mj-menu-item name="2">
										&lt;Icon type="group" class="title-icon" />
										&lt;span v-if="toggle.value==1">Introduction&lt;/span>
										&lt;mj-tooltip v-else direction="right" content="Introduction">&lt;span class="item-tips">&lt;/span>&lt;/mj-tooltip>
									&lt;/mj-menu-item>
									&lt;mj-submenu name="3">
										&lt;template slot="title">
											&lt;Icon type="fenxi" class="title-icon" />
											&lt;span v-if="toggle.value==1">Directives&lt;/span>
										&lt;/template>
										&lt;mj-menu-group v-show="toggle.value==1">
											&lt;mj-menu-item name="3-1">HeightMatch&lt;/mj-menu-item>
											&lt;mj-menu-item name="3-2">HeightViewport&lt;/mj-menu-item>
											&lt;mj-menu-item name="3-3">Margin&lt;/mj-menu-item>
										&lt;/mj-menu-group>
										&lt;mj-menu-group v-show="toggle.value==1">
											&lt;mj-menu-item name="3-4">Scroll&lt;/mj-menu-item>
											&lt;mj-menu-item name="3-5">Tooltip&lt;/mj-menu-item>
										&lt;/mj-menu-group>
									&lt;/mj-submenu>
									&lt;mj-submenu name="5">
										&lt;template slot="title">
											&lt;Icon type="setting" class="title-icon" />
											&lt;span v-if="toggle.value==1">Setting&lt;/span>
										&lt;/template>
										&lt;mj-menu-group v-show="toggle.value==1">
											&lt;mj-menu-item name="5-1">password&lt;/mj-menu-item>
											&lt;mj-menu-item name="5-2">user info&lt;/mj-menu-item>
											&lt;mj-submenu name="5-3">
												&lt;template slot="title">components&lt;/template>
												&lt;mj-menu-group>
													&lt;mj-menu-item name="5-3-1">Breadcrumb&lt;/mj-menu-item>
													&lt;mj-menu-item name="5-3-2">Button&lt;/mj-menu-item>
												&lt;/mj-menu-group>
											&lt;/mj-submenu>
										&lt;/mj-menu-group>
									&lt;/mj-submenu>
								&lt;/mj-menu>
							&lt;/div>
						&lt;/div>
					&lt;/template>
					&lt;script>
					export default {
						data(){
							return {
								toggle:{
									data:[
										{text: '展开', value: '1'},
										{text: '收起', value: '0'},
									],
									value:'1',
								}
							}
						},
					}
					&lt;/script>
					&lt;style scoped>
					/*框架侧边栏*/
					.toggle-sidebar {width:220px;z-index: 100;transition:width .2s ease;}
					.toggle-sidebar .mj-menu-vertical .mj-submenu-drop-list > .mj-menu-group > ul > li {padding-left: 40px;}
					.toggle-sidebar .mj-menu-vertical > .mj-submenu /deep/ > .mj-subment-dropdown > .mj-submenu-drop-list > .mj-menu-group .mj-submenu .mj-submenu-title {padding-left: 40px}
					/*mini收起样式*/
					.toggle-sidebar.min {width:70px;}
					.toggle-sidebar .title-icon {display: inline-block;width:20px;}
					.toggle-sidebar.min /deep/ .mj-menu-item,.toggle-sidebar.min /deep/ .mj-submenu-title {padding-left: 26px;}
					.toggle-sidebar.min /deep/ .mj-submenu-title .icon-arrow-down {display: none;}
					.toggle-sidebar.min .mj-submenu {position: relative;}
					.toggle-sidebar.min .mj-submenu /deep/ .mj-subment-dropdown {position: absolute;left:70px;top:0;display: none;overflow:initial;padding-left:3px;}
					.toggle-sidebar.min .mj-submenu:hover /deep/ > .mj-subment-dropdown {
					    display: block !important;
					}
					.toggle-sidebar.min .mj-submenu /deep/ .mj-subment-dropdown .mj-submenu-drop-list {
						background: #fff;color:#333;box-shadow: 0 0 8px 1px rgba(0,0,0,.15);padding:8px 0;border-radius:0 3px 3px 0;width:200px;
					}
					.toggle-sidebar.min /deep/ .mj-menu > .mj-menu-item:hover,
					.toggle-sidebar.min /deep/ .mj-submenu-title:hover {
						background:var(--primaryhover);color:#fff;
					}
					.toggle-sidebar.min .mj-submenu-title i {transition:0ms;}
					/*三级*/
					.toggle-sidebar.min .mj-submenu /deep/ .mj-subment-dropdown .mj-submenu .mj-subment-dropdown {left:200px;}
					.toggle-sidebar.min .mj-submenu /deep/ .mj-subment-dropdown .mj-submenu .mj-submenu-title {padding-left:15px;}
					.toggle-sidebar.min .mj-submenu /deep/ .mj-subment-dropdown .mj-submenu .mj-submenu-title:hover {background:var(--primary);color:#fff;}
					.toggle-sidebar.min .mj-submenu /deep/ .mj-subment-dropdown .mj-submenu .mj-submenu-title i {display: block;transition:0ms;transform:rotate(-90deg);}
					.toggle-sidebar.min .mj-submenu .mj-subment-dropdown .mj-menu-group {display: block !important;}
					.toggle-sidebar.min /deep/ .mj-submenu .mj-menu-item {padding-left: 15px !important;background: none;color:#333;border-radius:0;height: 36px;line-height: 36px;padding:0 10px;}
					.toggle-sidebar.min /deep/ .mj-submenu .mj-menu-item:hover {background:var(--primary);color:#fff;}
					.toggle-sidebar.min /deep/ .mj-menu-vertical .mj-subment-dropdown {height:auto !important;}
					/*tips*/
					.toggle-sidebar.min .item-tips {position: absolute;width: 100%;height: 100%;top:0;left:0;}
					.toggle-sidebar.min .mj-menu-theme-dark > .mj-submenu /deep/ .mj-submenu .mj-submenu-title {color:initial;}
					.toggle-sidebar.min .mj-menu-vertical > .mj-submenu /deep/ > .mj-subment-dropdown > .mj-submenu-drop-list > .mj-menu-group .mj-submenu .mj-submenu-title {padding-left: 15px}
					&lt;/style>

					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>



		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Menu 参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>mode</td>
					<td>菜单类型，可选值为 <code>horizontal</code>（水平） 和 <code>vertical</code>（垂直）</td>
					<td>String</td>
					<td>vertical</td>
				</tr>
				<tr>
					<td>active</td>
					<td>激活菜单的 name 值，如使用“1”为第一个菜单name，则默认激活</td>
					<td>String | Number</td>
					<td>1</td>
				</tr>
				<tr>
					<td>theme</td>
					<td>主题，可选值为 <code>light</code>、<code>dark</code></td>
					<td>String</td>
					<td>light</td>
				</tr>
				<tr>
					<td>accordion</td>
					<td>是否开启手风琴模式，开启后每次至多展开一个子菜单</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Menu 事件"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>事件名</th>
					<th>说明</th>
					<th>返回值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>select</td>
					<td>选择菜单（MenuItem）时触发，返回菜单name，url，target方式</td>
					<td>name | to | target</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Submenu 参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>name</td>
					<td>子菜单的唯一标识，必填</td>
					<td>String | Number</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Submenu slot"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>名称</th>
					<th>说明</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>title</td>
					<td>子菜单标题</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="MenuItem 参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>name</td>
					<td>唯一标识，必填。例：一级<code>1</code>，二级<code>1-1</code>，三级<code>1-1-1</code></td>
					<td>String | Number</td>
					<td>-</td>
				</tr>
				<tr>
					<td>to</td>
					<td>跳转连接，在回调中获取</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>target</td>
					<td>打开窗口方式，默认当前窗口打开，可设置<code>_blank</code>，在回调中获取</td>
					<td>String</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="MengGroup 参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>title</td>
					<td>分组标题</td>
					<td>String</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
	data(){
		return {
			themevalue:'light',
			theme:[
                {label: 'light', value: 'light'},
                {label: 'dark', value: 'dark'},
			],
			demoactive:'1',
			toggle:{
				data:[
					{label: '展开', value: '1'},
					{label: '收起', value: '0'},
				],
				value:'1',
			}
		}
	},
	methods:{
		onMenuSelect(name,to,target){
			console.log('父组件菜单选中:',name,to,target)
		},
	}
}
</script>

<style scoped>
/*框架侧边栏*/
.toggle-sidebar {width:220px;z-index: 100;transition:width .2s ease;}
.toggle-sidebar .mj-menu-vertical .mj-submenu-drop-list > .mj-menu-group > ul > li {padding-left: 40px;}
.toggle-sidebar .mj-menu-vertical > .mj-submenu /deep/ > .mj-subment-dropdown > .mj-submenu-drop-list > .mj-menu-group .mj-submenu .mj-submenu-title {padding-left: 40px}
/*mini收起样式*/
.toggle-sidebar.min {width:70px;}
.toggle-sidebar .title-icon {display: inline-block;width:20px;}
.toggle-sidebar.min /deep/ .mj-menu-item,.toggle-sidebar.min /deep/ .mj-submenu-title {padding-left: 26px;}
.toggle-sidebar.min /deep/ .mj-submenu-title .icon-arrow-down {display: none;}
.toggle-sidebar.min .mj-submenu {position: relative;}
.toggle-sidebar.min .mj-submenu /deep/ .mj-subment-dropdown {position: absolute;left:70px;top:0;display: none;overflow:initial;padding-left:3px;}
.toggle-sidebar.min .mj-submenu:hover /deep/ > .mj-subment-dropdown {
    display: block !important;
}
.toggle-sidebar.min .mj-submenu /deep/ .mj-subment-dropdown .mj-submenu-drop-list {
	background: #fff;color:#333;box-shadow: 0 0 8px 1px rgba(0,0,0,.15);padding:8px 0;border-radius:0 3px 3px 0;width:200px;
}
.toggle-sidebar.min /deep/ .mj-menu > .mj-menu-item:hover,
.toggle-sidebar.min /deep/ .mj-submenu-title:hover {
	background:var(--primaryhover);color:#fff;
}
.toggle-sidebar.min .mj-submenu-title i {transition:0ms;}
/*三级*/
.toggle-sidebar.min .mj-submenu /deep/ .mj-subment-dropdown .mj-submenu .mj-subment-dropdown {left:200px;}
.toggle-sidebar.min .mj-submenu /deep/ .mj-subment-dropdown .mj-submenu .mj-submenu-title {padding-left:15px;}
.toggle-sidebar.min .mj-submenu /deep/ .mj-subment-dropdown .mj-submenu .mj-submenu-title:hover {background:var(--primary);color:#fff;}
.toggle-sidebar.min .mj-submenu /deep/ .mj-subment-dropdown .mj-submenu .mj-submenu-title i {display: block;transition:0ms;transform:rotate(-90deg);}
.toggle-sidebar.min .mj-submenu .mj-subment-dropdown .mj-menu-group {display: block !important;}
.toggle-sidebar.min /deep/ .mj-submenu .mj-menu-item {padding-left: 15px !important;background: none;color:#333;border-radius:0;height: 36px;line-height: 36px;padding:0 10px;}
.toggle-sidebar.min /deep/ .mj-submenu .mj-menu-item:hover {background:var(--primary);color:#fff;}
.toggle-sidebar.min /deep/ .mj-menu-vertical .mj-subment-dropdown {height:auto !important;}
/*tips*/
.toggle-sidebar.min .item-tips {position: absolute;width: 100%;height: 100%;top:0;left:0;}
.toggle-sidebar.min .mj-menu-theme-dark > .mj-submenu /deep/ .mj-submenu .mj-submenu-title {color:initial;}
.toggle-sidebar.min .mj-menu-vertical > .mj-submenu /deep/ > .mj-subment-dropdown > .mj-submenu-drop-list > .mj-menu-group .mj-submenu .mj-submenu-title {padding-left: 15px}
</style>